<template>
  <div class="main">
    <div><van-nav-bar title="首页" fixed /></div>
    <div class="demo-notice">
      <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
          class="notice-swipe"
          vertical
          :autoplay="3000"
          :touchable="false"
          :show-indicators="false"
        >
          <van-swipe-item>嗜书如嗜酒,知味乃笃好</van-swipe-item>
          <van-swipe-item>纸上得来终觉浅,绝知此事要躬行</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
    <div class="main-swipe">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="image in images" :key="image"
          ><van-image width="100%" height="180" :src="image"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab
          v-for="item in typeNum"
          :title="item.type"
          :key="item.id"
          :name="item.type"
        >
          <van-swipe-cell v-for="item in book" :key="item.id">
            <van-card
              :key="item.id"
              :num="item.num"
              :tag="item.type"
              :price="item.price"
              :desc="item.author"
              :title="item.name"
              :thumb="item.image"
            >
            </van-card
            ><template #right>
              <van-button
                square
                text="借书"
                type="primary"
                class="delete-button"
                @click="borrow(item)"
              /> </template></van-swipe-cell
        ></van-tab>
      </van-tabs>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item replace to="/main" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/borrow" icon="new-o">借书</van-tabbar-item>
      <van-tabbar-item replace to="/history" icon="records"
        >历史借阅</van-tabbar-item
      >
      <van-tabbar-item replace to="/personal" icon="user-circle-o"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { selectRound } from "@/api/bookApi";
import { borrowBook } from "@/api/historyApi";
export default {
  data() {
    return {
      active: 0,
      images: [
        "http://localhost:4399/ext/file/5b19abd1-521b-48dd-a7b8-cd99614c5ce4.jpg",
        "http://localhost:4399/ext/file/2b625ef5-8faf-4b3e-975b-2235b6b89d16.jpg",
        "http://localhost:4399/ext/file/6da163c7-1593-4993-a62e-03329901d9be.jpg",
      ],
      typeNum: [
        {
          id: "1",
          type: "推荐",
        },
        {
          id: "2",
          type: "热门",
        },
      ],
      book: {
        id: "1",
        name: "2",
        num: "2",
        price: "2",
        type: "2",
        author: "2",
        image: "",
      },
    };
  },
  methods: {
    onClickTab() {
      selectRound({}).then((res) => {
        this.book = res;
      });
    },
    borrow(item) {
      console.log(item);
      this.$Modal.confirm({
        title: "借书",
        content: "你确认借出该书吗？",
        onOk: () => {
          borrowBook({
            username: localStorage.getItem("username"),
            bookId: item.id,
          }).then((res) => {
            if (res == false) {
              this.$Message.error("借书失败,已借数达到最大");
            } else {
              this.$Message.success("借书成功");
              window.setTimeout(function () {
                window.location.reload();
              }, 1000);
            }
          });
        },
      });
    },
  },
  created() {
    localStorage.removeItem("type");
    localStorage.removeItem("name");
    selectRound({}).then((res) => {
      this.book = res;
    });
  },
};
</script>

<style>
.main {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
  position: fixed;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.demo-notice {
  margin-top: 12%;
}
.delete-button {
  height: 100%;
}
</style>
